<template>
	<view class="content">
		<view class="top_nav">
		   <view class="left1" @click="back()">
		    <image src="../../static/img/arrow-left.png" mode=""></image>
		    <p>我的企业年金</p >
		   </view>
		   <view class="right1"><image src="../../static/img/bill.png" mode="" @click="open"></image></view>
		   </view>
		<view class="b-img"  v-if="cardInfos.length>0"></view>
		<view class="box" v-if="cardInfos.length>0">
		<view class="top">
			<view class="top-l">账户余额(元)</view>
			<view class="top-r">
				25,140.00
			</view>
		</view>
		<view class="basic">
	<view class="cell">
		<view class="tip"></view>
		<view class="title">基本信息</view>
	</view>
	<view class="b-cell">
		<view class="b-c-l">姓名</view>
		<view class="b-c-r">赵凯</view>
	</view>
	<view class="b-cell">
		<view class="b-c-l">单位</view>
		<view class="b-c-r">
特变电工股份有限公司</view>
	</view>
	<view class="b-cell">
		<view class="b-c-l">工号</view>
		<view class="b-c-r">000000</view>
	</view>
	</view>
	<view class="basic">
		<view class="cell">
			<view class="tip"></view>
			<view class="title">最新一季度缴费情况</view>
		</view>
		<view class="b-cell">
			<view class="b-c-l">最新缴费期</view>
			<view class="b-c-r">202006
</view>
		</view>
		<view class="b-cell">
			<view class="b-c-l">个人缴费金额</view>
			<view class="b-c-r">
	450.00</view>
		</view>
		</view>
		
		<view class="basic">
			<view class="cell">
				<view class="tip"></view>
				<view class="title">上年度收益情况</view>
			</view>
			<view class="b-cell">
				<view class="b-c-l">上年度收益</view>
				<view class="b-c-r">300.00</view>
			</view>
			</view>
			
			<view class="basic">
				<view class="cell">
					<view class="tip"></view>
					<view class="title">个人账户信息</view>
				</view>
				<view class="b-cell">
					<view class="b-c-l">特变累计缴费年限
</view>
					<view class="b-c-r">3
</view>
				</view>
				<view class="b-cell">
					<view class="b-c-l">累计收益</view>
					<view class="b-c-r">
			1,000.00</view>
				</view>
				</view>
				
				<view class="basic">
					<view class="cell">
						<view class="tip"></view>
						<view class="title">公司账户情况</view>
					</view>
					<view class="b-cell">
						<view class="b-c-l">累计收益率</view>
						<view class="b-c-r">3%</view>
					</view>
					</view>
		</view>
		<!-- <view v-else class="no-data">
			<image src="../../static/img/no-data.png" mode=""></image>
			<text class="datas">暂无数据~</text>
		</view> -->
		<uni-popup ref="popup" type="center">
			<view class="pop">
公司经营性指标公司经营性指标公司经营性指标公司经营性指标公司经营性指标公司经营性指标公司经营性指标公司经经营。
公司经营性指标公司经营性指标公司经营性指标公司经营性指标公司经营性指标公司经营性指标公司经营性指标公司经经营。
公司经营性指标公司经营性指标公司经营性指标公司经营性指标公司经营性指标公司经营性指标公司经营性指标公司经经营。
</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
	export default {
		components: {
			uniPopupMessage,
			uniPopupDialog,
			uniPopupShare
		},
		data() {
			return {
				title: 'Hello',
				value: '',
				options: [
					{
						value: '选项1',
						label: '2020年7月'
					},
					{
						value: '选项2',
						label: '2020年6月'
					},
					{
						value: '选项3',
						label: '2020年5月'
					}
				],
				cardInfos:[
					{
					id:1,
					name:'基本工资',
					num:'8,000.00'
				},{
					id:1,
					name:'岗位工资',
					num:'8,000.00'
				},{
					id:1,
					name:'绩效工资',
					num:'8,000.00'
				},{
					id:1,
					name:'交通补贴',
					num:'8,000.00'
				},{
					id:1,
					name:'伙食补贴',
					num:'8,000.00'
				},{
					id:1,
					name:'通讯补贴',
					num:'8,000.00'
				},{
					id:1,
					name:'设备补贴',
					num:'8,000.00'
				},{
					id:1,
					name:'高定工资',
					num:'8,000.00'
				},{
					id:1,
					name:'额定工资',
					num:'8,000.00'
				},{
					id:1,
					name:'工龄工资',
					num:'8,000.00'
				},{
					id:1,
					name:'职称工资',
					num:'8,000.00'
				},
				{
					id:1,
					name:'学历补贴',
					num:'8,000.00'
				},
				{
					id:1,
					name:'社保',
					num:'8,000.00'
				},
				{
					id:1,
					name:'公积金',
					num:'8,000.00'
				},
				{
					id:1,
					name:'补发',
					num:'8,000.00'
				},
				{
					id:2,
					name:'扣款',
					num:'8,000.00'
				},
				]
			}
		},
		onLoad() {

		},
		methods: {
			back() {
			 uni.navigateBack({ delta: 1 });
			},
          open(){
                  this.$refs.popup.open()
               }
		}
	}
</script>

<style lang="less">
	page{
	background: #f3f3f3;
	}
	.pop{
		width: 65%;
		// height: 50upx;
		background-color: #fff;
		padding: 30upx 30upx;
		border-radius: 10upx;
		box-sizing: border-box;
		margin: 0 auto;
		font-size: 26upx;
		line-height: 50upx;
		}
	.b-img{
		width: 100%;
		height: 120upx;
		background: #007AFF;
		border-radius: 0 0 35upx 35upx;
	}
	.content {
		width: 100%;
		height: 100%;
		background: #f3f3f3;
		.top_nav {
		 width: 100%;
		 height: 100rpx;
		 background-color: #007aff;
		 padding: 20rpx;
		 box-sizing: border-box;
		 display: flex;
		 justify-content: space-between;
		 position: relative;
		 .left1 {
		  display: flex;
		    image {
		   width: 58rpx;
		   height: 58rpx;
		  }
		  p {
		   color: #fff;
		   font-size: 32rpx;
		   margin: 7rpx 0 0 10rpx;
		  }
		 }
		 .right1 {
		  width: 40rpx;
		  height: 40rpx;
		  position: absolute;
		  top: 30rpx;
		  right: 50rpx;
		  image{
			width: 40rpx;
			height: 40rpx;  
		  }
		 }
		}
	}
	.box{
	width: 93%;
	height: auto;
	background-color: #fff;
	border-radius: 15upx;
	margin: -120upx auto 20upx;
		padding: 0 0 30upx 0;
		box-sizing: border-box;
	}
	.top{
		width: 100%;
		height: 140upx;
		/* background: red; */
		display: flex;
		flex-wrap: wrap;
		padding: 0 25upx;
	}
	.top-l{
		width: 100%;
		height: 60upx;
		line-height: 80upx;
		font-size: 24upx;
		text-align: center;
	}
	.top-r{
		width: 100%;
		height: 80upx;
		line-height: 60upx;
		font-size: 32upx;
		text-align: center;
		font-weight: 550;
	}
	.cell{
		width: 100%;
		height: 50upx;
		display: flex;
		flex-wrap: nowrap;
		// background: red;
		padding: 20upx 40upx;
		box-sizing: border-box;
		margin-bottom: 25upx;
		.tip{
			width: 8upx;
			height: 35upx;
			border-radius: 5upx;
			background: #007AFF;
		}
		.title{
			width: calc(100% - 8upx);
			// background: pink;
			padding:0 20upx;
			font-size: 28upx;
			// font-weight: 550;
			height: 35upx;
			line-height: 35upx;
		}
		}
		.b-cell{
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			padding: 20upx 40upx;
			box-sizing: border-box;
			.b-c-l{
				width: 35%;
				height: 30upx;
				font-size: 26upx;
				line-height: 30upx;
			}
			.b-c-r{
				width: 65%;
				height: 30upx;
				font-size: 26upx;
				text-align: right;
				color: #999;
				line-height: 30upx;
			}
			}
		.no-data{
			width: 100%;
			height: 360upx;
			/* background: red; */
			margin-top: 300upx;
			position: relative;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}
		.no-data image{
			width: 200upx;
			height:150upx;
			position: absolute;
			left: 36%;
		}
		.datas{
			width: 100%;
			height: 60upx;
			line-height: 60upx;
			text-align: center;
			position: absolute;
			top: 160upx;
			font-size: 28upx;
			color: #999;
		}
</style>
